<template>
  <div class="wrapper">
    <div class="content">
      <div class="content-header">
        <ul class="title-list">
          <li :class="[item.flag ? 'active': '']" @click="handleSelect(index, item.id)" v-for="(item,index) in titleList" :key="item.id">{{item.type_name}}</li>
        </ul>
      </div>
      <div class="content-main">
        <div class="article-list" v-for="item in articleList" :key="item.id" @click="handleClickDetail(item)">
          <div class="list-img">
            <img src="../../assets/14975630.png" alt="">
          </div>
          <div class="list-title">
            <h3>{{item.title}}</h3>
            <div>{{item.create_date}}</div>
          </div>
        </div>
        <el-pagination v-if="total> 0" :currentPage="pageNum" :page-sizes="[10,20,30,40,50]" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
    <div class="aside">
      <div></div>
      <div></div>
      <div></div>
    </div>

  </div>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, onMounted, onUnmounted, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { getTypes, getArticle } from '@/api/index'
export default defineComponent({
  name: 'Home',
  components: {},
  setup() {
    const vueEvent = getCurrentInstance().appContext.config.globalProperties.vueEvent
    const router = useRouter()
    const state = reactive({
      titleList: [],
      formSearch: {
        title: '',
        sort_id: '',
        status: 1
      },
      articleList: [],
      pageNum: 1,
      pageSize: 30,
      total: 0
    })

    onMounted(() => {
      getTypeList()
      getTableData()
      // 接收监听数据
      vueEvent.on('handleSearch', val => {
        console.log(val)
        state.formSearch.title = val
        getTableData()
      })
    })

    // 销毁
    onUnmounted(() => {
      vueEvent.off('handleSearch')
    })

    // 查询类型数据
    const getTypeList = async () => {
      let params = {
        pageNum: 1,
        pageSize: 100
      }
      const { data: res } = await getTypes(params)
      console.log(res)
      if (res.code === 200) {
        const result = res.data.result
        result.forEach(item => {
          item['flag'] = false
        })
        result.unshift({ type_name: '全部', id: '', flag: true })
        state.titleList = result
      }
    }

    // 获取文章列表数据
    const getTableData = async () => {
      let params = {
        pageNum: state.pageNum,
        pageSize: state.pageSize
      }
      Object.assign(params, state.formSearch)

      const { data } = await getArticle(params)
      if (data.code === 200) {
        const result = data.data.result
        state.total = data.data.total
        state.articleList = []
        result.forEach(item => {
          state.articleList.push(item)
        })
      }
    }

    // 选择页数
    const handleSizeChange = val => {
      state.pageSize = val
      getTableData()
    }
    // 选择页码
    const handleCurrentChange = val => {
      state.pageNum = val
      getTableData()
    }

    // 点击选择当前
    const handleSelect = (index, id) => {
      state.titleList.forEach((el, i) => {
        if (index === i) {
          el.flag = true
        } else {
          el.flag = false
        }
      })
      state.formSearch.sort_id = id
      getTableData()
    }

    // 跳转详情页面
    const handleClickDetail = obj => {
      router.replace({
        path: '/detail',
        name: 'Detail',
        params: {
          ...obj
        }
      })
    }

    return {
      ...toRefs(state),
      handleSelect,
      handleSizeChange,
      handleCurrentChange,
      handleClickDetail
    }
  }
})
</script>
<style lang="scss" scoped>
.wrapper {
  width: 70%;
  margin: 15px auto;
  display: flex;
  justify-content: space-between;
}
.content {
  display: flex;
  flex-direction: column;
  flex: 5;
  background: #fff;
  .content-main {
    .article-list {
      display: flex;
      align-items: center;
      // box-shadow: 0px 0px 10px #ddd;
      border-bottom: 1px solid #eee;
      padding: 5px 10px;
      .list-img {
        margin-right: 6px;
        img {
          width: 42px;
          height: 42px;
        }
      }
      .list-title {
        font-size: 14px;
        cursor: pointer;
        h3 {
          font-size: 16px;
          margin-bottom: 2px;
          color: #666;
        }
        > div {
          color: #999;
        }
      }
    }
  }
}
.title-list {
  display: flex;
  align-items: center;
  list-style: none;
  background: #f6f6f6;
  li {
    padding: 10px;
    cursor: pointer;
  }
  li.active {
    color: #80bd01;
  }
}
.aside {
  margin-left: 15px;
  flex: 1;
  > div {
    height: 220px;
    background: #fff;
    margin-bottom: 15px;
  }
}
</style>


